<script lang="ts" setup>
import { ref } from 'vue';


const isShow = ref(false);
const toggleShow = () => {
  isShow.value = !isShow.value;
};

</script>

<template>
  <button @click="toggleShow()">开关按钮</button>
  <!-- v-show 控制的标签，还ui保留在页面中，只是被隐藏，-->
  <!-- 通过 style="display":none;不可见，不占位 -->
  <div class="box" v-show="isShow">
    我是通过 v-show 条件渲染的盒子
  </div>
  <!-- v-if 控制的标签，不满足条件，不会创建（跟鸿蒙的 if 条件渲染一样） -->
  <div class="box" v-if="isShow">
    我是通过 v-if 条件渲染的盒子
  </div>
</template>

<style scoped>
.box {
  width: 200px;
  height: 200px;
  background-color: red;
  margin: 10px;
}
</style>
